<template>
  <div class="homelist">
    <div class="homelist_logo"></div>
    <div class="homelist_word">
      <a href="">阿道夫官方旗舰店</a>

      <img src="../assets/icon/309下线性.png" @click="GoMenu" alt="" />
    </div>
    <input
      @focus="skip"
      placeholder="请输入商品.."
      prefix-icon="el-icon-search"
      class="searchClass"
    />
    <!-- 获取焦点事件 -->
    <!-- 注：@符号，是v-on的简写 事件绑定 -->

    <div class="home">
      <!-- <img src="@/assets/logotwo/backgroundimg.jpg" alt="" /> -->

      <div id="nav" class="nav" :class="{ 'fix-nav': navBarFixed }">
     

        <el-menu
          :default-active="this.$route.path"
          class="el-menu-demo"
          mode="horizontal"
          @select="handleSelect"
          router
          text-color="black"
           background-color="transparent"
        >
          <el-menu-item
            v-for="(item, i) in navList"
            :key="i"
            :index="item.name"
          >
            <!-- <template slot="title"> -->
              <span> {{ item.navItem }}</span>
            <!-- </template> -->
          </el-menu-item>
        </el-menu>
        <!-- <el-main class="detailed-content"> -->
        <!-- </el-main> -->
      </div>
    </div>
   
   
    <div class="footer"> 
       <el-alert title="618狂欢爆款秒杀中....." type="warning" center show-icon>
    </el-alert></div>
    <div>
       
       <router-view />

    </div>

  </div>
</template>
<script>
import Menu from "@/components/Menu.vue";

export default {
  data() {
    return {
      components: Menu,
      navBarFixed: false,
      navList: [
        { name: "/HomeList/companyBackground", navItem: "首页" },
        { name: "/HomeList/companyRisk", navItem: "商品" },
        { name: "/HomeList/companyManager", navItem: "介绍" },
        { name: "/HomeList/homeLeft", navItem: "介绍" },

      ],
    };
  },
  mounted() {
    // 事件监听滚动条
    window.addEventListener("scroll", this.watchScroll);
  },
  destroyed() {
    // 移除事件监听
    window.removeEventListener("scroll", this.watchScroll);
  },
  methods: {
    GoMenu() {
      this.$router.push("/Menu");
    },

    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },

    // 搜索
    skip() {
      //点击跳转搜索页面
      this.$router.push({
        path: "/About", //跳转到search.vue组件
      });
    },

    watchScroll() {
      // 滚动的距离
      var scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop;

      // 容器的高度
      var offsetTop = document.querySelector("#nav").offsetHeight;

      console.log("scrollTop=>", scrollTop, "  offsetTop=>", offsetTop);

      //  滚动的距离如果大于了元素到顶部的距离时，实现吸顶效果
      if (scrollTop > offsetTop) {
        this.navBarFixed = true;
      } else {
        this.navBarFixed = false;
      }
    },
  },
};
</script>
<style lang="less" scoped>
 
.el-menu-item.is-active{  // element更改导航栏被选中项的底边框线
     border-bottom:black ;
 }
 .el-menu.el-menu--horizontal { // 去掉element-ui导航栏底部边框线
     border-bottom: none;
 }
.el-menu-item.is-active { // element更改导航栏被选中项的背景颜色
     background-color:transparent !important;
    
}
span{
  margin-left: 18px;
}
.homelist {
  height: 1400px;
  padding: 0;
}
.homelist_logo {
  float: left;
  // background-color: blueviolet;
  background-image: url(../assets/logo/logo002.jpg);
  background-size: 100% 100%;
  width: 58px;
  border-radius: 5px;
  height: 55px;
  margin: 2px 10px;
  border: 2px solid grey;
}
.homelist_word {
  margin: 40px auto;
  width: 160px;
  height: 20px;
  float: left;
  // background-color: antiquewhite;
}
.homelist_word img {
  width: 20px;
  height: 20px;
  float: left;
  margin: 0 4px;
}
.homelist_word a {
  text-decoration: none;
  text-align: center;
  float: left;
  font-weight: 800;
  color: black;
}
.home {
  height: 120px;
  padding: 0;
  margin: 0 auto;
  background-image: url(../assets/logotwo/backgroundimg.jpg);
  background-size: 100% 100%;
}
/* 导航 */
.nav {
  width: 100%;
  height: 60px;
  background-color: rgba(0, 0, 0, 0.15); //背景半透明IE8以下不支持，
  background-color: #000\9; //只有IE9以下能处理这个代码hask
  filter: alpha(opacity=30); //IE滤镜
  position: absolute;
  top: 60px;
  float: left;
}
.fix-nav {
  position: fixed;
top: 0;
  z-index: 999;
}

.searchClass {
  background-image: url(../assets/icon/sousuo.png);
  background-size: 25px 25px;
  background-position: 4px 1px;
  background-repeat: no-repeat;
  float: left;
  width: 80px;
  height: 25px;
  margin: 32px 25px;
  border-radius: 9px;
  background-color: transparent;
  color: #000;
  font-size: 14px;
}

</style>